<template>
  <div ref="print">
    <jxf-titletip title="查看详情" :hasGoBack="true" :hasPrint="true" @printPage="printOrder"
                  @goBack="$emit('update:isShowDetail', false)" :hasRefresh="false"></jxf-titletip>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>当前订单状态：已完成</span>
        <div>
          <el-button type="primary" @click="printOrder" ref="print" class="no-print">打印</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>基本信息</span>
      </div>
      <jxf-table :table="basicTable1">
        <template slot="orderType" slot-scope="scope">
          <span>{{scope.row.orderType === 0 ? '普通订单': scope.row.orderType === 1 ? "直通订单" : ""}}</span>
        </template>
        <template slot="deliveryType" slot-scope="scope">
          <span>{{scope.row.deliveryType === 0 ? '商家配送': scope.row.deliveryType === 1 ? "自提" : scope.row.deliveryType === 2 ? "甩单" : ""}}</span>
        </template>
      </jxf-table>
      <jxf-table key='basicTable2' :table="basicTable2" style="margin-top: -1px;">
        <template slot="orderAmount" slot-scope="scope">
          <span>{{scope.row.orderAmount !== "" && scope.row.orderAmount !== null ? "￥" + scope.row.orderAmount : ""}}</span>
        </template>
        <template slot="expectTime" slot-scope="scope">
          <!--overtime 是否超时(0否,1是) -->
          <span v-if="scope.row.overtime === 1" class="c-red">{{scope.row.expectTime}}(已超时)</span>
          <span v-else>{{scope.row.expectTime}}</span>
        </template>
        <template slot="deliveryType" slot-scope="scope">
          <span>{{scope.row.deliveryType === 0 ? '商家配送': scope.row.deliveryType === 1 ? "自提" : scope.row.deliveryType === 2 ? "甩单" : ""}}</span>
        </template>
        <template slot="payType" slot-scope="scope">
          <span>{{scope.row.payType === 0 ? '余额支付': scope.row.payType === 1 ? "鲜丰惠支付" : scope.row.payType === 2 ? "信用支付" : ""}}</span>
        </template>
      </jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>收货人信息</span>
      </div>
      <jxf-table :table="receiverTable"></jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>发货人信息</span>
      </div>
      <jxf-table :table="senderTable"></jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>物流信息</span>
      </div>
      <jxf-table :table="logisticsTable">
        <template slot="deliveryType" slot-scope="scope">
          <span>{{scope.row.deliveryType === 0 ? '商家配送': scope.row.deliveryType === 1 ? "自提" : scope.row.deliveryType === 2 ? "甩单" : ""}}</span>
        </template>
      </jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>商品信息</span>
      </div>
      <jxf-table :table="productTable">
        <template slot="picUrl" slot-scope="scope">
          <img :src="scope.row.picUrl" alt="" style="width: 50px;height: 50px;">
        </template>
        <template slot="productName" slot-scope="scope">
          <span>销售名称：{{scope.row.productName}}<br/>标准名称：{{scope.row.standardName}}</span>
        </template>
        <template slot="attrInfo" slot-scope="scope">
          <span>品牌：{{scope.row.brand}}<br/>产地：{{scope.row.productAddress}}</span>
        </template>
        <template slot="priceAndSku" slot-scope="scope">
          <span>价格：{{scope.row.price !== "" && scope.row.price !== null ? "￥" + scope.row.price : ""}}<br/>sku：{{scope.row.skuCode}}</span>
        </template>
      </jxf-table>
    </el-card>
    <div class="text-right mt20 mb20">
      <span>{{amount.orderAmount !== "" && amount.orderAmount !== null ? "订单总金额：￥" + amount.orderAmount : ""}}</span><br>
      <span>{{amount.infoAmount !== "" && amount.infoAmount !== null ? "平台信息费：￥" + amount.infoAmount : ""}}</span><br>
      <span>{{amount.orderfreight !== "" && amount.orderfreight !== null ? "订单运费：￥" + amount.orderfreight : ""}}</span>
    </div>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'
  export default {
    props: {
      isShowDetail: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        basicTable1: {},
        basicTable2: {},
        receiverTable: {},
        senderTable: {},
        logisticsTable: {},
        productTable: {},
        orderInfo:{},
        amount:{
          orderAmount:"",
          infoAmount:"",
          orderfreight:""
        }
      }
    },
    methods: {
      initTable() {
        this.basicTable1 = {
          headerStyle: {background: '#f9f9f9'},
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '订单号',
              prop: 'orderNo'
            }, {
              id: '2',
              label: '下单时间',
              prop: 'orderTime'
            }, {
              id: '3',
              label: '采购商企业名称',
              prop: 'merchantName'
            }, {
              id: '4',
              label: '下单人名称',
              prop: 'createName'
            }, {
              id: '5',
              label: '下单人账号',
              prop: 'account'
            }, {
              id: '6',
              label: '订单类型',
              show: 'template',
              prop: 'orderType'
            }, {
              id: '7',
              label: '配送方式',
              show: 'template',
              prop: 'deliveryType'
            }
          ],
          data: []
        }
        this.basicTable2 = {
          headerStyle: {background: '#f9f9f9'},
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '供应商企业名称',
              prop: 'enterpriseName'
            }, {
              id: '2',
              label: '供应商门店名称',
              prop: 'shopName'
            }, {
              id: '3',
              label: '订单金额（元）',
              prop: 'orderAmount'
            }, {
              id: '4',
              label: '运费金额（元）',
              prop: 'freight'
            }, {
              id: '5',
              label: '订单实际金额（元）',
              prop: 'payAmount'
            }, {
              id: '6',
              label: '期望送达时间',
              prop: 'expectTime'
            }, {
              id: '7',
              label: '所属分公司',
              prop: 'cityName'
            }
          ],
          data: []
        }
        this.receiverTable = {
          headerStyle: {background: '#f9f9f9'},
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '收货人',
              prop: 'consigneeName'
            }, {
              id: '2',
              label: '联系方式',
              prop: 'consigneeTel'
            }, {
              id: '3',
              label: '收货地址',
              prop: 'address'
            }
          ],
          data: []
        }
        this.senderTable = {
          headerStyle: {background: '#f9f9f9'},
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '发货人',
              prop: 'createName'
            }, {
              id: '2',
              label: '联系方式',
              prop: 'consignerTel'
            }, {
              id: '3',
              label: '发货地址',
              prop: 'storeAddress'
            }
          ],
          data: []
        }
        this.logisticsTable = {
          headerStyle: {background: '#f9f9f9'},
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '配送',
              show: 'template',
              prop: 'deliveryType'
            }, {
              id: '2',
              label: '价格',
              prop: 'freightRule'
            }, {
              id: '3',
              label: '运费路程',
              prop: 'distance'
            }, {
              id: '4',
              label: '运费金额',
              prop: 'freight'
            }
          ],
          data: []
        }
        this.productTable = {
          headerStyle: {background: '#f9f9f9'},
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '商品图片',
              prop: 'picUrl',
              show: "template"
            }, {
              id: '2',
              label: '商品名称',
              show: "template",
              prop: 'productName'
            }, {
              id: '3',
              label: '属性资料',
              prop: 'attrInfo',
              show: "template",
              minWidth: "150"
            }, {
              id: '4',
              label: '价格/sku',
              prop: 'priceAndSku',
              show: "template"
            }, {
              id: '5',
              label: '规格',
              prop: 'unit'
            }, {
              id: '6',
              label: '数量',
              prop: 'collectCount'
            }
          ],
          data: []
        }
      },
      getSettleOrderInfo(id) {
        ajax.get(apis.factory.getSettleOrderInfo, {id: id})
          .then(res => {
            if (res.success === true) {
              if (res.data !== [] && res.data !== null) {
                this.formatInfo(res.data)
              } else {
                this.basicTable1.data = []
                this.basicTable2.data = []
                this.receiverTable.data = []
                this.senderTable.data = []
                this.logisticsTable.data = []
                this.productTable.data = []
              }
              this.basicTable1.loading = false
              this.basicTable2.loading = false
              this.receiverTable.loading = false
              this.senderTable.loading = false
              this.logisticsTable.loading = false
              this.productTable.loading = false
            }
          })
      },
      formatInfo(info) {
        let order = info.order
        this.amount = {
            orderAmount:order.orderAmount,
            infoAmount:order.infoFee,
            orderfreight:order.freight
        }
        this.basicTable1.data = [{
          orderNo: order.orderNo,
          orderTime: formatDate.timeFormat(order.orderTime),
          orderType: order.orderType,
          account: order.account,
          merchantName: order.merchantName,
          createName: order.createName,
          deliveryType: order.deliveryType
        }]
        this.basicTable2.data = [{
          enterpriseName: order.enterpriseName,
          shopName: order.shopName,
          orderAmount: order.orderAmount,
          freight: order.freight,
          payAmount: order.payAmount,
          expectTime: formatDate.timeFormat(order.expectTime),
          cityName: order.cityName
        }]
        this.receiverTable.data = [{
          consigneeName: order.consigneeName,
          consigneeTel: order.consigneeTel,
          address: order.address
        }]
        this.senderTable.data = [{
          createName: order.createName,
          consignerTel: order.consignerTel,
          storeAddress: order.storeAddress
        }]
        this.logisticsTable.data = [{
          deliveryType: order.deliveryType,
          freightRule: order.freightRule,
          freight: order.freight,
          distance: order.distance
        }]
        this.productTable.data = order.products !== [] && order.products !== null ? order.products.map(item =>{
          return {
            picUrl: item.picUrl,
            productName: item.productName,
            standardName: item.standardName,
            brand: item.brand,
            productAddress: item.productAddress,
            price: item.price,
            skuCode: item.skuCode,
            unit: item.unit,
            collectCount: item.collectCount
          }
        }) : []
      },
      // 打印订单
      printOrder() {
        this.$print(this.$refs.print)
      }
    },
    created() {
      this.initTable()
    }
  }
</script>

<style lang="scss" scoped>
  @media print {
    .print, .print * {
      max-width: 100%;
      color: red;
    }
  }

</style>
